<template>
	<d2-container>
		<!-- 页头部分 -->
		<template slot="header">
			<el-form ref="queryForm" :model="queryForm" class="header-area" label-width="100px" style="height:auto">
				<!-- 说明 -->
				<!-- 一行用一个row -->
				<!-- 每行由若干个col组成 -->
				<!-- 每行所有col的span值加起来，最大不超过24！ -->
				<el-row>
					<el-col :span="6">
						<el-form-item label="券商品名称" prop="productName">
							<el-input type="text" v-model="queryForm.productName" placeholder="请输入券商品名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="变更类型" prop="changeType">
							<el-select v-model="queryForm.changeType" placeholder="请选择变更类型">
								<el-option label="全部" value=""></el-option>
								<el-option label="改价" value="1"></el-option>
								<el-option label="改库存" value="2"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="变更历史" prop="changeHistory">
							<el-input type="text" v-model="queryForm.changeHistory" placeholder="请输入变更历史"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="操作人" prop="operator">
							<el-input type="text" v-model="queryForm.operator" placeholder="请输入操作人"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="操作时间" prop="time">
							<el-date-picker
									v-model="time"
									type="datetimerange"
									:picker-options="pickerOptions"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									value-format="timestamp"
									align="right"
									:default-time="['00:00:00', '23:59:59']"
								></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<div class="search-submit">
							<el-button type="primary" size="medium" @click="submitForm('queryForm')">查询</el-button>
							<el-button size="medium" @click="resetForm('queryForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</template>

		<!-- 主体部分 -->
		<template>
			<!-- 表格 -->
			<!-- 表格统一用 带边框、条纹间隔 的样式 -->
			<el-table :data="tableData" stripe border style="width: 100%">
				<el-table-column type="index" fixed label="序号" width="50"></el-table-column>
				<el-table-column prop="productName" label="消费券商品名称"></el-table-column>
				<el-table-column prop="changeType" label="变更类型" width="150">
					<template slot-scope="scope">
                        <el-tag v-if="scope.row.changeType==1">改价</el-tag>
                        <el-tag v-if="scope.row.changeType==2">改库存</el-tag>
                    </template>
				</el-table-column>
				<el-table-column prop="changeHistory" label="变更历史" width="400"></el-table-column>
                <el-table-column prop="operateDesc" label="变更说明" width="400"></el-table-column>
				<el-table-column prop="operator" label="操作人" width="150"></el-table-column>
				<el-table-column prop="operateTime" label="操作时间" width="200" :formatter="forDateOperate"></el-table-column>
			</el-table>
		</template>

		<!-- 页脚部分 -->
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</template>

	</d2-container>
</template>

<script>
import { findProductCouponLogListByPage } from '@api/coupon/productCouponLog'
import dayjs from 'dayjs'
export default {
  name: 'coupon-productCouponLogList',
  data () {
    return {
      queryForm: {
        productName: '',
        changeType: '',
		changeHistory: '',
		operator: '',
        operateStartTime: '',
        operateEndTime: ''
      },
      time: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
	  tableData: [],
	  currentPage: 1,
	  pageSize: 10,
	  total: 0,
	  multipleSelection: []
    }
  },
  mounted () {
    this.fetchData()
  },
  methods: {
	resetPage () {
        this.currentPage = 1,
        this.pageSize = 10,
        this.total = 0
    },
	submitForm (formName) {
		this.resetPage()
        this.fetchData()
	},
	resetForm (formName) {
		this.$refs[formName].resetFields()
        this.time = []
        this.resetPage()
        this.fetchData()
	},
	fetchData () {
      this.loading = true
      this.queryForm.operateStartTime = this.time[0] == null ? '' : dayjs(this.time[0]).format('YYYY-MM-DD HH:mm:ss')
      this.queryForm.operateEndTime = this.time[1] == null ? '' : dayjs(this.time[1]).format('YYYY-MM-DD HH:mm:ss')
      findProductCouponLogListByPage({
        productName: this.queryForm.productName,
		changeType: this.queryForm.changeType,
		changeHistory: this.queryForm.changeHistory,
        operator: this.queryForm.operator,
        operateStartTime: this.queryForm.operateStartTime,
        operateEndTime: this.queryForm.operateEndTime,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.content
        this.total = res.data.total
        this.loading = false
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    },
	handleSizeChange (val) {
	    this.pageSize = val
		this.fetchData()
	},
	handleCurrentChange (val) {
	    this.currentPage = val
		this.fetchData()
	},
	forDateOperate (row, column) {
        return row.operateTime == null ? '' : dayjs(row.operateTime).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style lang="scss" scoped>
	// 样式请务必加scoped

</style>
